<template>
  <a-modal
    title="提交任务"
    :visible="visible"
    :dialog-style="{ top: '20px' }"
    :confirm-loading="loading"
    width="1000px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-row>
        <a-form-model-item ref="targetKey" label="下一节点" prop="targetKey">
          <a-radio-group
            :options="nextNodes"
            v-model="form.targetKey"
            :default-value="defaultNextNode"
            @change="changeNextNode" />
        </a-form-model-item>
      </a-row>
      <a-row v-show="form.isEndNode !== 'Y'">
        <a-form-model-item ref="assignee" label="审批人" prop="assignee">
          <a-transfer
            v-model="form.assignee"
            show-search
            :data-source="selectUsers"
            :list-style="{
              width: '45%',
              height: '300px',
            }"
            :target-keys="selectUserIds"
            :render="renderItem"
            @change="handleChange"
            @dblclick.right="handleChange"
          />
        </a-form-model-item>
      </a-row>
      <a-row>
        <a-form-model-item ref="comment" label="审批意见" prop="comment">
          <a-textarea
            placeholder="请填写审批意见"
            class="custom"
            v-model="form.comment"
            style="width: 95%"
            allow-clear
            :rows="4"
          />
        </a-form-model-item>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import { selectUserList } from '@/api/system/user'
import { mapGetters } from 'vuex'

export default {
  name: 'SubmitTask',
  components: {},
  props: {
    // 节点信息
    // eslint-disable-next-line vue/require-default-prop
    taskNode: {
      type: Object,
      require: true
    },
    submitType: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      // 显示弹框
      visible: false,
      // 遮罩
      loading: false,
      // 不可以选人
      defaultApprove: false,
      // 下一任务节点
      nextNodes: [],
      // 可选人
      selectUsers: [],
      // 选中人
      selectUserIds: [],
      // 默认选中
      defaultNextNode: undefined,
      // 下一节点信息
      nextNodeData: {},
      form: {
        comment: undefined,
        targetKey: undefined,
        assignee: undefined,
        isEndNode: undefined,
        multiInstance: undefined,
        bizId: undefined,
        instanceId: undefined,
        taskId: undefined,
        userId: undefined,
        submitType: undefined
      },
      rules: {
        targetKey: [{ required: true, message: '任务节点不能为空', trigger: 'blur' }],
        assignee: [{ required: true, message: '任务审批人不能为空', trigger: 'change' }],
        comment: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    taskNode: function (val) {
      if (!!val && !!this.submitType && (this.submitType === 'S' || this.submitType === 'R')) {
        this.rest()
        // 初始化下一节点
        this.initNextNode()
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    /** 初始化下一任务节点**/
    initNextNode () {
      const nextNodeKeys = this.taskNode.nextNodes
      if (nextNodeKeys) {
        const nodes = []
        // 可选任务节点
        nextNodeKeys.forEach(e => {
          nodes.push({
            label: e.nextNodeName,
            value: e.nextNodeKey
          })
        })
        this.nextNodes = nodes
      }
      // 默认选中第一个节点
      const nextNode = nextNodeKeys[0]
      // 设置为选中
      this.form.targetKey = nextNode.nextNodeKey
      // 是否默认审批人
      this.defaultApprove = nextNode.defaultApprove === 'Y'
      // 是否审批结束
      this.form.isEndNode = nextNode.isEndNode
      if (nextNode.isEndNode === 'Y') {
        // eslint-disable-next-line no-return-assign
        this.rules.assignee.forEach(e => e.required = false)
      } else {
        // eslint-disable-next-line no-return-assign
        this.rules.assignee = [{ required: true, message: '任务审批人不能为空', trigger: 'change' }]
        // 第一个节点可选择人
        this.loadSelectUsers(nextNode)
      }
      // 是否多选
      this.form.multiInstance = nextNode.multiInstance
      // 常用意见
      if (this.taskNode.taskContexts.length > 0) {
        this.form.comment = this.taskNode.taskContexts[0]
      }
    },
    // 下一节点变更
    changeNextNode (event) {
      // 查找对应的节点
      const filter = this.taskNode.nextNodes.filter(e => e.nextNodeKey === event.target.value)
      const nextNode = filter[0]
      // 是否默认审批人
      this.defaultApprove = nextNode.defaultApprove === 'Y'
      // 是否审批结束
      this.form.isEndNode = nextNode.isEndNode
      if (nextNode.isEndNode === 'Y') {
        // eslint-disable-next-line no-return-assign
        this.rules.assignee.forEach(item => item.required = false)
      } else {
        this.loadSelectUsers(nextNode)
      }
      // 是否多选
      this.form.multiInstance = nextNode.multiInstance
      // 常用意见
      if (this.taskNode.taskContexts.length > 0) {
        this.form.comment = this.taskNode.taskContexts[0]
      }
    },
    // 搜索可选人
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 加载用户信息
    loadSelectUsers (node) {
      const param = { 'roleIds': node.roleIds, 'userIds': node.userIds, 'orgFilterType': node.orgFilterType }
      selectUserList(param).then(res => {
        const userList = []
        const selected = []
        res.data.forEach(e => {
          const data = {
            key: e.userId,
            title: e.nickName,
            description: e.deptFullName,
            disabled: this.defaultApprove
          }
          if (this.defaultApprove) {
            selected.push(data.key)
          }
          userList.push(data)
        })
        this.selectUsers = userList
        this.selectUserIds = selected
        this.form.assignee = this.selectUserIds
      })
    },
    // 自定义显示内容
    renderItem (item) {
      const customLabel = (
        <span class='custom-item'>
          {item.title} - {item.description}
        </span>
      )
      return {
        label: customLabel,
        value: item.title
      }
    },
    // 选择
    handleChange (targetKeys, direction, moveKeys) {
      if (this.form.multiInstance === 'Y') {
        this.selectUserIds = targetKeys
      } else {
        if (direction === 'left') {
          this.selectUserIds = []
        } else {
          this.selectUserIds = moveKeys
        }
      }
      this.form.assignee = this.selectUserIds
    },
    // 显示弹框
    show () {
      this.visible = true
    },
    rest () {
      this.form = {
        comment: undefined,
        targetKey: undefined,
        assignee: undefined,
        isEndNode: undefined,
        multiInstance: undefined,
        bizId: this.taskNode.bizId,
        instanceId: this.taskNode.instanceId,
        taskId: this.taskNode.taskId,
        userId: this.userId,
        submitType: 'S'
      }
      this.defaultApprove = undefined
      this.nextNodes = []
      this.selectUsers = []
      this.selectUserIds = []
      this.defaultNextNode = undefined
      this.nextNodeData = {}
    },
    // 处理任务
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submitOk', this.form)
        }
      })
    },
    // 关闭弹框
    handleCancel () {
      this.visible = false
    }
  },
  created () {

  },
  mounted () {
  }
}
</script>,
